<template>
  <div class="common-toolbar">
    <!-- 工具选择区域 -->
    <div class="toolbar-section tools-section">
      <van-button-group>
        <van-button 
          icon="arrow" 
          :type="editorStore.activeTool === 'select' ? 'primary' : 'default'" 
          size="small" 
          @click="setActiveTool('select')" 
          title="选择工具"
        />
        <van-button 
          icon="edit" 
          :type="editorStore.activeTool === 'text' ? 'primary' : 'default'" 
          size="small" 
          @click="setActiveTool('text')" 
          title="文本工具"
        />
        <van-button 
          icon="photo-o" 
          :type="editorStore.activeTool === 'shape' ? 'primary' : 'default'" 
          size="small" 
          @click="setActiveTool('shape')" 
          title="形状工具"
        />
        <van-button 
          icon="photo" 
          :type="editorStore.activeTool === 'image' ? 'primary' : 'default'" 
          size="small" 
          @click="setActiveTool('image')" 
          title="图片工具"
        />
        <van-button 
          icon="brush-o" 
          :type="editorStore.activeTool === 'pen' ? 'primary' : 'default'" 
          size="small" 
          @click="setActiveTool('pen')" 
          title="钢笔工具"
        />
      </van-button-group>
    </div>
    
    <!-- 元素操作区域 -->
    <div class="toolbar-section element-actions" v-if="hasSelection">
      <van-button-group>
        <van-button icon="description" size="small" @click="duplicateElement" title="复制" />
        <van-button icon="delete" size="small" @click="deleteElement" title="删除" />
        <van-button 
          :icon="isLocked ? 'passed' : 'lock'" 
          size="small" 
          @click="toggleLock" 
          :title="isLocked ? '解锁' : '锁定'" 
        />
      </van-button-group>
    </div>
    
    <!-- 多选操作区域 -->
    <div class="toolbar-section multi-selection-actions" v-if="hasMultiSelection">
      <van-button-group>
        <van-button icon="cluster-o" size="small" @click="groupElements" title="组合" />
        <van-divider direction="vertical" />
        <van-button icon="align-left" size="small" @click="alignLeft" title="左对齐" />
        <van-button icon="align-center" size="small" @click="alignCenter" title="居中对齐" />
        <van-button icon="align-right" size="small" @click="alignRight" title="右对齐" />
      </van-button-group>
    </div>
    
    <!-- 层级操作区域 -->
    <div class="toolbar-section layer-actions" v-if="hasSelection">
      <van-button-group>
        <van-button icon="arrow-up" size="small" @click="bringToFront" title="置于顶层" />
        <van-button icon="arrow-down" size="small" @click="sendToBack" title="置于底层" />
      </van-button-group>
    </div>
    
    <!-- 历史记录操作区域 -->
    <div class="toolbar-section history-actions">
      <van-button-group>
        <van-button 
          icon="revoke" 
          size="small" 
          @click="undo" 
          :disabled="!canUndo" 
          title="撤销"
        />
        <van-button 
          icon="replay" 
          size="small" 
          @click="redo" 
          :disabled="!canRedo" 
          title="重做"
        />
      </van-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useEditorStore, useElementsStore, useHistoryStore } from '@/stores';
import { eventBus } from '@/utils/eventBus';

const editorStore = useEditorStore();
const elementsStore = useElementsStore();
const historyStore = useHistoryStore();

// 计算属性
const hasSelection = computed(() => editorStore.hasSelection);
const hasMultiSelection = computed(() => editorStore.hasMultiSelection);
const activeElementId = computed(() => editorStore.selection.activeElementId);
const activeElement = computed(() => {
  if (activeElementId.value) {
    return elementsStore.getElementById(activeElementId.value);
  }
  return null;
});
const isLocked = computed(() => activeElement.value?.isLocked || false);
const canUndo = computed(() => historyStore.canUndo);
const canRedo = computed(() => historyStore.canRedo);

// 设置活动工具
function setActiveTool(tool: 'select' | 'text' | 'shape' | 'image' | 'pen') {
  editorStore.setActiveTool(tool);
  eventBus.emit('tool:changed', { tool });
}

// 工具栏操作
function duplicateElement() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'duplicate',
      elementId: activeElementId.value
    });
  }
}

function deleteElement() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'delete',
      elementId: activeElementId.value
    });
  }
}

function toggleLock() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: isLocked.value ? 'unlock' : 'lock',
      elementId: activeElementId.value
    });
  }
}

function groupElements() {
  eventBus.emit('toolbar:action', {
    action: 'group',
    elementIds: editorStore.selection.selectedElementIds
  });
}

function alignLeft() {
  eventBus.emit('toolbar:action', {
    action: 'align-left',
    elementIds: editorStore.selection.selectedElementIds
  });
}

function alignCenter() {
  eventBus.emit('toolbar:action', {
    action: 'align-center',
    elementIds: editorStore.selection.selectedElementIds
  });
}

function alignRight() {
  eventBus.emit('toolbar:action', {
    action: 'align-right',
    elementIds: editorStore.selection.selectedElementIds
  });
}

function bringToFront() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'bring-to-front',
      elementId: activeElementId.value
    });
  }
}

function sendToBack() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'send-to-back',
      elementId: activeElementId.value
    });
  }
}

function undo() {
  eventBus.emit('history:undo');
}

function redo() {
  eventBus.emit('history:redo');
}
</script>

<style scoped>
.common-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 16px;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}

.toolbar-section {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .common-toolbar {
    justify-content: center;
    padding: 8px;
    gap: 8px;
  }
  
  .toolbar-section {
    margin-bottom: 8px;
  }
}

/* 暗色主题样式 */
:deep(.dark-theme) .common-toolbar {
  background-color: var(--dark-surface-color);
  border-color: var(--dark-border-color);
}
</style>